// projects/dynamic-forms/src/lib/time-stamp-segment.component.ts
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LocalizationService } from '@abp/ng.core';

@Component({
  selector: 'time-stamp-segment',
  template: `
    <form nz-form nzLayout="horizontal" [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-select 
            formControlName="Format"
            [nzPlaceHolder]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.PlaceHolder')"
          >
            <nz-option nzValue="yyyyMMdd" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.yyyyMMdd')"></nz-option>
            <nz-option nzValue="yyyyMM" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.yyyyMM')"></nz-option>
            <nz-option nzValue="yyyy" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.yyyy')"></nz-option>
            <nz-option nzValue="MM" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.MM')"></nz-option>
            <nz-option nzValue="dd" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.dd')"></nz-option>
            <nz-option nzValue="HH" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.HH')"></nz-option>
            <nz-option nzValue="mm" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.mm')"></nz-option>
            <nz-option nzValue="ss" [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.TimeStampSegment.Format.Options.ss')"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </form>
  `,
  styles: []
})
export class TimeStampSegmentComponent implements OnInit, OnChanges {
  @Input() formData: any = { Format: null };
  @Output() configurationChanged = new EventEmitter<any>();
  @Output() validityChanged = new EventEmitter<boolean>();

  validateForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private localizationService: LocalizationService
  ) {}

  ngOnInit() {
    this.buildForm();
    if (!this.formData) {
      this.formData = { Format: null };
    }
    this.validateForm.patchValue(this.formData);
    this.onFormChange();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['formData'] && !this.formData) {
      this.formData = { Format: null };
    }
    if (this.validateForm) {
      this.validateForm.patchValue(this.formData);
    }
  }

  private buildForm() {
    this.validateForm = this.fb.group({
      Format: [null, [Validators.required]]
    });

    this.validateForm.valueChanges.subscribe(() => {
      this.onFormChange();
    });
  }

  private onFormChange() {
    if (this.validateForm.valid) {
      this.formData = this.validateForm.value;
      this.configurationChanged.emit(this.formData);
    }
    this.validityChanged.emit(this.validateForm.valid);
  }

  protected l(key: string): string {
    return this.localizationService.instant(key);
  }
}



